<template>
  <div class="login">
    <div class="login_content">
      <div class="login_content_left"></div>
      <div class="login_content_right">
        <el-form
          ref="AccountFrom"
          :model="account"
          :rules="rules"
          label-position="left"
          label-width="0px"
          class="login_form"
        >
          <h3 class="login_title">登录直播教室</h3>
          <el-form-item prop="username">
            <el-input
              type="text"
              v-model="account.username"
              auto-complete="off"
              placeholder="用户名"
              autofocus="autofocus"
              clearable
              @keyup.enter.native="next"
            ></el-input>
          </el-form-item>
          <el-form-item prop="userpassword">
            <el-input
              type="password"
              v-model="account.userpassword"
              auto-complete="off"
              placeholder="用户密码"
              ref="autofocus_pwd"
              @keyup.enter.native="handleLogin"
            ></el-input>
          </el-form-item>
          <el-form-item prop="roompassword">
            <el-input
              type="password"
              v-model="account.roompassword"
              auto-complete="off"
              placeholder="教室密码"
              ref="autofocus_pwd"
              @keyup.enter.native="handleLogin"
            ></el-input>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button
              type="primary"
              class="submit_button"
              @click.native.prevent="handleLogin"
              >进入教室</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import http from "@/api/login_entry";
export default {
  data() {
    return {
      account: {
        username: "",
        userpassword: "",
        roompassword: ''
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" }
          //{ validator: validaePass }
        ],
        userpassword: [
          { required: true, message: "请输入用户密码", trigger: "blur" }
          //{ validator: validaePass2 }
        ],
        roompassword: [
          { required: true, message: "请输入教室密码", trigger: "blur" }
          //{ validator: validaePass2 }
        ]
      }
    };
  },
  methods: {
    handleLogin() {
      this.$refs.AccountFrom.validate(valid => {
        if (valid) {
          // 匹配地址栏动态参数
          this.account.serial = this.$route.params.serial;
          this.account.usertype = this.$route.params.usertype;
          this.account.center_id = this.$route.params.centerid;
          let params = this.account;
          console.log("params", params);
          http.loginEntry(params).then(res => {
            this.$message.success(res.msg || "登录成功!");
            console.log("res", res);
            window.location.href = res.data;
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  background: url("https://gaoxiaocrm.oss-cn-hangzhou.aliyuncs.com/vue/login/loginentry-bg.png") no-repeat;
  // background: url('https://gaoxiaocrm.oss-cn-hangzhou.aliyuncs.com/vue/login/bg.png') no-repeat;
  background-size: 100% 100%;
  overflow: auto;
  &_content {
    display: flex;
    width: 776px;
    height: 424px;
    border-radius: 25px;
    background-color: #fff;
    overflow: hidden;
    &_left {
      width: 466px;
      height: 424px;
      background: url("https://gaoxiaocrm.oss-cn-hangzhou.aliyuncs.com/vue/login/loginentry-left.png") 80px 80px
        no-repeat;
      // background: url('https://gaoxiaocrm.oss-cn-hangzhou.aliyuncs.com/vue/login/login-left.jpg') no-repeat;
      background-size: 70% 70%;
      position: relative;
    }
    &_right {
      flex: 1;
      background: #fff;
      min-width: 340px;
      .login_form {
        margin: 50px 16.12% 20px;
        .login_title {
          font-size: 22px;
          line-height: 80px;
          color: #1796eb;
          letter-spacing: 2px;
          font-weight: 400;
        }
        .submit_button {
          width: 100%;
          height: 40px;
          font-size: 16px;
          letter-spacing: 4px;
        }
      }
    }
  }
}
@media (min-width: 1660px) {
  .login {
    &_content {
      display: flex;
      width: 81%;
      height: 78%;
      margin: 30px;
      &_left {
        width: 60%;
        height: 100%;
      }
      &_right {
        flex: 1;
        background: #fff;
        min-width: 340px;
        .login_form {
          margin: 188px 16.12%;
          .login_title {
            font-size: 26px;
            line-height: 110px;
            color: #1796eb;
            letter-spacing: 2px;
            font-weight: 400;
          }
          .submit_button {
            width: 100%;
            height: 62px;
            font-size: 26px;
            letter-spacing: 4px;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
@media (min-width: 1660px) {
  .login {
    .el-form-item {
      height: 62px;
      margin-bottom: 30px;
      & > .el-form-item__content {
        height: 62px;
        & > .el-input {
          height: 62px;
          & > .el-input__inner {
            height: 62px;
            font-size: 18px;
          }
        }
      }
      .findPassword {
        position: absolute;
        top: 0px;
        right: 10px;
        bottom: 0px;
      }
    }
    .submit_button {
      width: 100%;
      height: 62px;
      font-size: 24px;
      letter-spacing: 4px;
    }
  }
}
</style>
